<template>
	<view class="body">
		<view class="topbar">
			<view :class="currentIndex == index ? 'item active' : 'item'" v-for="(item,index) in tabArr"
				:key="index" @click="handleTab(item.value,index)">
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		<view class="list">
			<block v-if="recordList && recordList.length > 0">
				<view class="li" v-for="item,index in recordList" :key="index" @click="handleInfo(item)">
					<view class="left">
						<image :src="item.delivery_photo_url" mode=""></image>
					</view>
					<view class="right">
						<view class="top">
							<view class="title">{{item.cargo_info}}</view>
							<view class="size"><text>收件人：</text>{{item.receiver_name}}</view>
						</view>
						<view class="center">
							<text>{{item.pickup_location}}</text>
							<text class="line">至</text>
							<text>{{item.delivery_location}}</text>
						</view>
						<view class="bottom">
							<view class="text"><text>送件期限：</text>{{moment(item.pickup_time).format("YYYY-MM-DD")}}
							</view>
							<view class="price">￥{{item.reward_amount}}</view>
						</view>
					</view>
				</view>
			</block>
			<u-empty text="暂无数据" mode="data" v-else></u-empty>
		</view>
	</view>
</template>

<script>
	import moment from '@/common/moment';
	export default {
		data() {
			return {
				tabArr: [
					{
						name: "全部",
						value: ""
					},
					{
						name: "发布中",
						value: "INIT"
					},
					{
						name: "派送中",
						value: "SENDING"
					},
					{
						name: "已送达",
						value: "DONE1"
					},
					{
						name: "已确认送达",
						value: "DONE2"
					},
				],
				currentIndex: 0,
				queryForm: {
					status: "",
					page: 1,
					page_size: 10,
				},
				recordList: [],
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			moment,
			//获取列表
			getList() {
				this.$Api.getPublishList(this.queryForm).then(res => {
					// console.log('获取列表', res)
					this.recordList = res.data.result
					res.data.result.map((item) => {
						return App.globalData.requestUrl + '/media/' + item.delivery_photo_url
					})
				}, err => {
					console.log(err)
				})
			},
			//查看详情
			handleInfo(item) {
				uni.navigateTo({
					url: "/pages/user/publishInfo"
				})
			},
			//tab切换
			handleTab(value,index) {
				this.currentIndex = index
				this.queryForm.status = value
				this.queryForm.page = 1
				this.recordList = []
				this.getList()
			},
		},
		onReachBottom(){
			this.queryForm.page++
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.body {

		.topbar {
			width: 100%;
			background: #fff;
			padding: 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0;
			z-index: 99;
			
			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				background: #f5f5f5;
				border-radius: 10upx;
				padding: 10upx 20upx;
			
				&.active {
					background: #4094ff;
			
					.name,
					.num {
						color: #fff;
					}
				}
			
				.name {
					color: #414141;
				}
			
				.num {
					color: #333;
					margin-left: 10upx;
				}
			}
		}

		.list {
			width: 94%;
			margin: 0 auto;
			padding-top: 22%;

			.li {
				width: 100%;
				background: #fff;
				border-radius: 20upx;
				padding: 30upx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 30upx;

				.left {
					width: 140upx;
					height: 140upx;
					border-radius: 10upx;
					overflow: hidden;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
						display: block;
						margin: 0 auto;
					}
				}

				.right {
					flex: 1;
					margin-left: 30upx;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2upx solid #e5e5e5;
						padding-bottom: 10upx;

						.title {}

						.size {
							text {
								color: #999;
							}
						}
					}

					.center {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 2upx solid #e5e5e5;
						margin: 10upx 0;
						padding-bottom: 10upx;

						text {
							color: #414141;
						}

						.line {
							color: #999;
							margin: 0 10upx;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.text {
							text {
								color: #999;
							}
						}

						.price {
							color: #ff0000;
							font-size: 32upx;
						}
					}
				}
			}
		}
	}
</style>